<template>
 
<el-config-provider :locale="locales[useLocale.locale]">
    <router-view v-if="isRouterActive"></router-view>
 </el-config-provider>
</template>
<script setup>
import { ref, onMounted, onUnmounted,provide, nextTick,computed} from 'vue'
import zhtw from 'element-plus/es/locale/lang/zh-tw'
import zhcn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
import pl from 'element-plus/es/locale/lang/pl'
import vi from 'element-plus/es/locale/lang/vi'
import { useLocaleStore } from '@/store/locales'
const isRouterActive = ref(true)
const locales = {
  "zh-tw": zhtw,
  "zh-cn": zhcn,
  en: en,
  pl:pl,
  vi:vi
}
const useLocale = useLocaleStore()
//const useCommon = useCommonStore();
const screenWidth = ref(window.innerWidth)
const handleResize = () => {
  screenWidth.value = window.innerWidth
  if(screenWidth.value>767){
   useLocale.setIsMob(false);
  }else{
    useLocale.setIsMob(true);
  }
}

onMounted(() => {
  handleResize();
  //getDictionary();
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})


 
provide('reload', () => {
  isRouterActive.value = false
  nextTick(() => {
    isRouterActive.value = true
  })
})
</script>
<style lang="scss">
.el-tooltip__trigger:focus-visible {
      outline: unset;
    }
.el-link{
      font-weight:normal;
}

</style>
